$.ajax({
    url: '../serves/province.php',
    dataType: 'json',
    success(res) {
      // // 将获取到省份加到下拉选框中
      let pro = document.querySelector('#province');
      bindHtml(pro,'province_id',res,'省份');
      //给pro一个改变change事件
      pro.onchange = function () {
        let pid = this.value;
        // ajax请求，传参pid获取到省份的城市
        $.ajax({
          url: '../serves/city.php',
          data: {
            pid: pid
          },
          dataType: 'json',
          success (res) {
            let city = document.querySelector('#city');
            bindHtml(city,'city_id',res,'城市');
            // 给city一个改变change事件
            city.onchange = function () {
              let cid = this.value;
              // ajax请求，传递cid获取到城市的城区县市
              $.ajax({
                url: '../serves/area.php',
                data: {
                  cid: cid
                },
                dataType: 'json',
                success (res) {
                  let area = document.querySelector('#area');
                  bindHtml(area,'area_id',res,'城区');
                  // 给area一个改变change事件
                  area.onchange = function () {
                    let aid = this.value;
                    // ajax请求，传递cid获取到城市的城区县市
                    $.ajax({
                      url: '../serves/town.php',
                      data: {
                        aid: aid
                      },
                      dataType: 'json',
                      success (res) {
                        let town = document.querySelector('#town');
                        bindHtml(town,'town_id',res,'城镇街道');
                      }
                    })
                  }

                }
              })
            }
          }
        })

      }
    }
  })
  function bindHtml(ele,id,res,name){
     // 将获取到省份加到下拉选框中
    let proStr = `<option value="请选择${name}">请选择${name}</option>`;
    res.forEach(item => {
      proStr += `<option value="${item[id]}">${item['name']}</option>`
    });
    // 将拼接好的标签字符串放到pro标签中
    ele.innerHTML = proStr;
  }
